    <% extends "admin/layout.html" %>
    <% block main%>
        <style>
            #progress_loading{
                display:none;
                margin:20px auto 10px;
                width:80%;
            }
        </style>
            <fieldset class="layui-elem-field">
              <legend>数据表格</legend>
              <div class="layui-field-box">
                    <button class="layui-btn layui-btn-danger" id="reload_data">刷新节点</button>
                      <div class="layui-progress" id="progress_loading" lay-filter="progress_loading" lay-showPercent="yes">
                        <div class="layui-progress-bar" lay-percent="0%"></div>
                      </div>
                    <table id="img_node" lay-filter="img_node"></table>
              </div>
            </fieldset>
        <script type="text/html" id="nodeBar">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                    class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
    <% endblock %>
    <% block script %>
    $('#node').addClass('layui-this');
          //第一个实例
          table.render({
            elem: '#img_node'
            ,method: 'post'
            ,url: '<< url_for("node") >>' //数据接口
            ,page: {
                  curr: location.hash.replace('#!fenye=', '')
                  ,hash: 'fenye'
                  ,limit:10
                } //开启分页
            ,cols: [[ //表头
              {field: 'id', title: 'ID', sort: true, fixed: 'left'}
              ,{field: 'node_name', title: '节点名'}
            ,{'title': '操作', width: 200, align: 'center', toolbar: '#nodeBar'}
            ]]
          });
         function task_progress(task_id,task_name){
            $.ajax({
                url:'/process?task_id='+task_id+'&task_name='+task_name,
                dataType:'json',
                success:function(res){
                    if(res.status=='PROGRESS' || res.status=='STARTED'){
                        element.progress('progress_loading', res.progress+'%');
                        setTimeout(function(){ task_progress(task_id,task_name)}, 10000);
                    }
                    else if(res.status=='SUCCESS'){
                        element.progress('progress_loading', '100%');
                        setTimeout(function(){ $('#progress_loading').hide() },1000);
                    }
                    else if(res.status=='PENDING'){
                        element.progress('progress_loading', '0%');
                        alert('任务在排队')
                        setTimeout(function(){ task_progress(task_id,task_name)}, 5000);
                    }
                    else{
                        element.progress('progress_loading', '0%');
                        alert('后台进程异常，请稍后重试')
                        setTimeout(function(){ $('#progress_loading').hide() },1000);
                    }
                }
            })
         }
         $('#reload_data').click(function(){
            $('#progress_loading').show();
            element.progress('progress_loading', '0%');
            $.ajax({
                url:'/reload?task_name=reload_node',
                dataType:'json',
                success:function(res){
                    task_id=res.task_id
                    setTimeout(function(){ task_progress(task_id,'reload_node')}, 5000);
                },
                error:function(){
                    element.progress('progress_loading', '100%');
                    setTimeout(function(){ $('#progress_loading').hide() },1000);
                }
            });
         });
        table.on('tool(img_node)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
    
            if (layEvent === 'del')
            { //删除
                layer.confirm('真的删除行么', function (index) {
                    layer.close(index);
                    //向服务端发送删除指令
                    var loading = layer.load(2);
                    $.ajax({
                        url: '<< url_for('node_del') >>',
                        data: {'id': data.id},
                        dataType: 'json',
                        success: function (returnData) {
                            layer.close(loading)
                            if (returnData.status == 1) {
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.msg('删除成功')
                            }
                            else {
                                layer.msg('删除失败，请刷新页面')
                            }
                        }
                    })
                });
            }
        });
    <% endblock %>